<template>
  <div style="width: 100%;min-height: 400px; background-color: #FFFFFF;">
    <el-row class="el-row2" style="height: 60px;line-height: 60px;">
      <el-col :span="20"
        >商品信息
        <i class="iconfont icon-cross" @click="changet()"></i>
      </el-col>
      <el-col :span="4">
        <div
          v-if="orderx.status == 1"
          style="width: 80px;height: 30px;line-height:30px;background-color: #c0feff;margin-top: 15px; "
        >
          已提交
        </div>
        <div
          v-if="orderx.status == 2"
          style="width: 80px;height: 30px;line-height:30px; background-color: #ff381e;margin-top: 15px;"
        >
          待付款
        </div>
        <div
          v-if="orderx.status == 3"
          style="width: 80px;height: 30px;line-height:30px; background-color: #c0feff;margin-top: 15px;"
        >
          待发货
        </div>
        <div
          v-if="orderx.status == 4"
          style="width: 80px;height: 30px;line-height:30px; background-color: #c0feff;margin-top: 15px;"
        >
          待收货
        </div>
        <div
          v-if="orderx.status == 5"
          style="width: 80px;height: 30px;line-height:30px; background-color: #b6bbbf;margin-top: 15px;"
        >
          交易完成
        </div>
      </el-col>
    </el-row>
    <el-row
      class="el-row3"
      style="background-color: #FFFFFF; border-top: #b1d6ea solid 1px; line-height: 20px;"
      v-for="item1 in orderx.orderDetails"
    >
      <el-col :span="9"
        ><img
          :src="item1.item_image"
          style="width: 180px; height: 180px; border: #989898 solid 1px; margin-top: 10px;"
      /></el-col>
      <el-col :span="15">{{ item1.item_title }}</el-col>
      <el-col :span="3" :push="16">数量：{{ item1.item_num }}</el-col>
      <el-col :span="3" :push="16">单价：{{ item1.item_price }}</el-col>
    </el-row>
    <el-row style="border-bottom: #b1d6ea solid 1px; ">
      <el-col :span="24"
        ><span
          style="font-size: 20px;font-weight: bold;float: right; margin-right: 40px;"
          >总价：{{ orderx.payment_money }}</span
        ></el-col
      >
    </el-row>
    <el-row>
      <el-col
        :span="4"
        :push="20"
        style="margin-top: 20px;"
        v-if="orderx.status == 1"
      >
        <el-button type="primary" @click="gofrist()">提交订单</el-button>
      </el-col>
      <el-col
        :span="4"
        :push="20"
        style="margin-top: 20px;"
        v-if="orderx.status == 2"
      >
        <el-button type="primary" @click="pay()">去付款</el-button>
      </el-col>
      <el-col
        :span="4"
        :push="20"
        style="margin-top: 20px;"
        v-if="orderx.status == 3 || orderx.status == 4"
      >
        <el-button type="primary" @click="shouhuo()">确定收货</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "orderx",
  props: {
    orderx: {
      type: Object, //参数类型必须是一个对象
      required: true,
    },
  },
  data() {
    return {
      msg: this.orderx,
    };
  },
  methods: {
    //endOrder
    shouhuo() {
      this.$axios
        .get("http://localhost:8080/mall/orders/endOrder", {
          params: {
            order_code: this.orderx.order_code,
          },
        })
        .then((ret) => {
          if (ret.status == 200) {
            this.$message.success("收货成功");
            this.$set(this.orderx, "status", 5);
          }
        });
    },
    pay() {
      this.$router.push({
        path: "/ordersecond",
        query: {
          order_code: this.orderx.order_code,
        },
      });
    },
    gofrist() {
      this.$router.push({
        path: "/orderfirst",
        query: {
          order_code: this.orderx.order_code,
        },
      });
    },
    changet() {
      this.$emit("changeTable", 0);
    },
  },
  created() {},
};
</script>

<style></style>
